<template>
    <view class="page savepadding">
        <view class="card box1">
			<view class="card-box">
				<view class="card-title">
					<view class="title1">{{filterNull(brandName)+" "+filterNull(seriesName)}}</view>
					<view class="desc">{{filterNull(modelName)}}</view>
				</view>
				           
				<view class="card-img">
					<image :src="imgUrl" mode="aspectFill"></image>
				</view>
			</view>
        </view>
        <view class="card">
            <view class="list inline">
                <view class="label">试驾城市<text style="color:#FF6A15 ">*</text></view>
                <view class="text">{{filterNull(reserveCityName)}}</view>
            </view>
            <view class="line"></view>
			<view class="list inline">
			    <view class="label">试驾门店<text style="color:#FF6A15 ">*</text></view>
			    <view class="text" style='width:100%;display: flex;justify-content: space-between;' @click='timeStatus = true'>
					<text>{{filterNull(storeNames)}}</text>
					<u-icon name="arrow-right" color="#333" size="12" style='margin-top:5upx;'></u-icon>
				</view>
			</view>
			<view class="line"></view>
			<view class="list inline">
			    <view class="label">姓名<text style="color:#FF6A15 ">*</text></view>
			    <view class="text" style='font-weight: normal;'><input v-model="userName" placeholder="请输入姓名"></input></view>
			</view>
			<view class="line"></view>
			<view class="list inline">
			    <view class="label">联系电话<text style="color:#FF6A15 ">*</text></view>
			    <view class="text" style='font-weight: normal;'><input v-model="userPhone" placeholder="请输入联系电话" ></u--input></view>
			</view>
			<view class="line"></view>
			<view class="list inline">
			    <view class="label">意向备注</view>
			    <view class="text" style='font-weight: normal;'><textarea v-model="remake" style='width:450upx' placeholder="请输入备注内容" count :maxlength="50"></textarea></view>
			</view>
        </view>

		<view style="height: 125upx;">

		</view>

        <!-- 按钮区 -->
        <view class='button-box'>
            <view class="bottom_btns savepadding" :class="isIos?'bottom3':''">
                <view class="button" @click="next">提交预约</view>
            </view>
        </view>
		<u-popup :show="timeStatus" mode="bottom" round="10" style="position: relative;">
			<view class='info-box'>
				<view class='title-box'>
					<view class='title-box-text'>门店选择</view>
					<view class="close-img-box" @click='timeStatus=false'>
						<image class="close-img" src="../../../static/window_icon_close.png"></image>
					</view>
					
				</view>
				<view style='margin-bottom: 100upx;max-height: 1000upx;overflow-y: auto;min-height:400upx'>
					<view class='searchStyl'>
						<u-search shape="square" v-model="storeName" bgColor="#FFFFFFS " placeholder="请输入门店名称" placeholderColor="#CDCDCD" :showAction="false" @click="doSearch(storeName)" @search="doSearch(storeName)"></u-search>
					</view>
					<view v-for="(item,index) in storeList" class='info-value' @click=typeClick(item) :key='index'>
						<view class='info-value-text' :class="selectTime==item.storeId?'click-text':''">
							<view class='tite-text'>{{filterNull(item.deptName)}}</view>
							<view class='value-text'>{{filterNull(item.deptAddress)}}</view>
						</view>
					</view>
				</view>
				
				<view class="bottom2" :class="isIos?'bottom3':''"  @click='confirm()'>确定</view>
			</view>
		</u-popup>
    </view>
</template>

<script>
import {
    rentalDetails
} from '../../../common/api.js';
import * as loginApi from '@/common/apis/login-api';
import {cluessourceDriver} from '../../../common/apis/order-api';
export default {

    data() {
        return {
            brandName: '',
            schemeId: '',
            seriesName: '',
            modelName: '',
            schemeTypeStr: '',
            schemeType: 0, //1.直购，2分期购车，3租赁 4.金融分期
            dataList: [],
            selectItem: 0,
            modelId: '',
			imgUrl:'',
			reserveCityName:'',
			storeName:'',
			schemeTime:{},
			selectTime:'',
			timeStatus:false,
			isIos:false,
			userName:'',
			remake:'',
			userPhone:'',
			storeNames:'请选择门店',
			storeList:[]
        };
    },
	computed: {
		// deptId() {
		//     return this.$store.state.user.deptId;
		// },
	},
    methods: {
		getStore() {
			loginApi.storelist({
				storeName: this.storeName,
				modelId:this.modelId,
				modelName:this.modelName,
				brandName:this.brandName,
				seriesName:this.seriesName,
				schemeType:this.schemeType,
				cityCode: uni.getStorageSync('cityCode')?uni.getStorageSync('cityCode'):110000,
			}).then(res => {
				this.storeList = [];
				this.storeList = res	
			})
		},
		// 门店查询
		doSearch(){
			this.getStore();
		},
		confirm(){
			this.storeId = this.schemeTime.storeId
			this.storeNames = this.schemeTime.deptName
			this.timeStatus = false
		},
		//门店
		typeClick(item){
			this.selectTime = item.storeId	
			this.schemeTime = item
		},
		// 打开租期选择弹框
		changeTime(){
			this.selectTime = ''
			this.timeStatus = true
		},
        getData() {
			rentalDetails({
				params: {
					schemeId: this.schemeId,
					storeId: uni.getStorageSync('storeId')
				}
			}).then((res)=>{
				this.imgUrl = res.carModelUrlList[0]
				this.brandName = res.brandName;
				this.seriesName = res.seriesName;
				this.modelName = res.modelName;
				this.schemeTypeStr = res.schemeTypeStr;
				this.schemeId = res.schemeId;
				this.schemeType = res.schemeType;
				this.modelId = res.modelId;
				this.timeList = res.tenancyList
				this.getStore()
			})
			
        },

        pre() {
            uni.navigateBack()
        },

        next() {
			if (!/^1[3456789]\d{9}$/.test(this.userPhone)){
			    uni.showToast({
			        title: '手机号错误',
			        icon: 'error',
			        duration: 2000
			    });
			    return;
			}
			if(uni.$u.test.isEmpty(this.userName) || uni.$u.test.isEmpty(this.userPhone) || uni.$u.test.isEmpty(this.storeNames)){
				uni.showToast({
				    title: '请完善必填信息!',
				    icon: 'none',
				    duration: 2000
				  });
				return
			}
			cluessourceDriver({
				modelId:this.modelId,
				contact:this.userName,
				phone:this.userPhone,
				storeId:this.storeId,
				schemeType:this.schemeType,
				reserveContent:this.remake
				
			}).then((res)=>{
				uni.showToast({
					title: '提交成功,跳转中',
					icon: 'loading'
				});
				uni.reLaunch({
					url: '/pages/testDrive/testDrive?bizType=6&title=我要试驾'
				});
			})
            
        }
    },
    onLoad(op) {
		this.schemeId = op.schemeId;
		this.reserveCityName = uni.getStorageSync('cityName')
		this.userPhone = uni.getStorageSync('phone')
        this.getData();
    },
	onShow(){
		const type = uni.getStorageSync('modelType')
		if(type=='iphone'){
			this.isIos = true
		}else{
			this.isIos = false
		}
	}

}
</script>

<style lang="scss" scoped>
.page {
    padding: 32upx;
}
.box1{
	background-image: url('../../../static/矩形@2x.png');
	background-size: cover;
}
.card {
	position: relative;
    padding: 32upx;
    margin-bottom: 24upx;
	.card-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.card-title{
			.title1 {
			    font-size: 32upx;
			    font-weight: bold;
			    color: #000000;
			    margin-bottom: 18upx;
			}
			.desc {
			    font-size: 24upx;
			    color: #999999;
			}
		}
		.card-img{
			width:208upx;
			height: 100upx;
			image {
			    width: 100%;
			    height: 100%;
			    border-radius: 10upx;
			}
		}
	}

    

    .line {
        margin-bottom: 32upx;
        border-bottom: 1px solid #F8F8F8;
    }

    .list {
        &.inline {
            display: flex;
            justify-content: start;
			margin-bottom: 30upx;
        }

        .label {
            min-width:136upx;
            font-size: 28upx;
            color: #666666;
			margin-right:32upx ;
        }

        .text {
            font-size: 28upx;
            font-weight: bold;
            color: #000000;
			max-width:500upx;
        }

        .table1 {
			width: 100%;
            .row {
				padding:60upx 50upx 32upx 50upx  ;
                height: 124upx;
                // display: flex;
                // justify-content: space-around;
                // align-items: center;
                // text-align: center;
                border-radius: 8upx;
                font-size: 24upx;
				margin-bottom: 24upx;
				background-color:#F7FAFC;
				color:#000000;
				position: relative;
                // &:nth-child(odd) {
                // 	background: #009B01;
                // 	color: #fff;
                // }
				.span-box{
					width:100%;
					display: flex;
					justify-content: space-between;
				}
				.icon-title{
					width:88upx;
					height:40upx;
					line-height: 40upx;
					font-size:24upx ;
					background-color:#E7ECEF;
					color:#173B42;
					position: absolute;
					top:0upx;
					left:0upx;
					border-radius: 8upx 0upx 16upx 0upx;
					text-align: center;
				}
				.icon-title1{
					
					background-color:#173B42  ;
					color:#ffffff;
				}
				.span1{
					display: flex;
					justify-content: start;
					margin-bottom:8upx ;
					.span1-text{
						margin-right: 24upx;
					}
				}
				.icon-box{
					position: absolute;
					bottom: 0;
					right: 0;
					width:48upx;
					height: 48upx;
					background:linear-gradient(315deg, #D6DCE0  , #D6DCE0   50%, transparent 50%, transparent 100%) ;
					.icon{
						position: absolute;
						right: 0px;
						bottom: 0px;
					}
				}
            }
        }
    }
	.list1{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.list2{
			display: flex;
			align-items: center;
		}
	}
}

.itemActive {
    border: 1px solid #173B42;
    color:#173B42 !important;
	background-color: #ffffff !important;
}
.icon-itemActive{
	position: absolute;
	bottom: 0;
	right: 0;
	width:48upx;
	height: 48upx;
	background: linear-gradient(315deg, #173B42 , #173B42  50%, transparent 50%, transparent 100%) !important;
}
.button-box{
	position: fixed;
	bottom: 0;
	left:0;
	background-color: #ffffff;
	width: 100%;
	height:200upx;
	.bottom_btns {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    text-align: center;
	    position: fixed;
	    bottom: 32upx;
	    left: 0;
	    width: 90%;
		padding:0 32upx;
	    z-index: 10;
	    background: #fff;
	    .button {
	        line-height: 80upx;
			width:100%;
			height: 80upx;
			border:1px solid #173B42 ;
			border-radius: 8upx;
	    }
	
	    .button:nth-child(1) {
	      background: #173b42;
	      color: #fff;
	    }
		
	}
	.bottom3{
		position:absolute;
		bottom: 70upx;
	}
}

.info-box{
			background-color:#F8F8F8 ;
			padding:32upx;
			.searchStyl{
				height: 64upx;
				background: #ffffff;
				border-radius:8upx ;
				margin-bottom:32upx;
			}
			.bottom2 {
				position:absolute;
				bottom: 30upx;
				width: 90%;
				height: 80upx;
				text-align: center;
				line-height: 80upx;
				background-color: $redec;
				border-radius: 8upx;
				color:#ffffff;
				font-size: 32upx;
			}
			.bottom3{
				position:absolute;
				bottom: 70upx;
			}
			.value-box-title{
				display: flex;
				align-items: center;
				font-size: 28upx;
				color:#000000;
				margin-bottom: 24upx;
				.close-img{
					width: 32upx;
					height: 32upx;
				}
			}
			.value-box-value{
				background-color: #ffffff;
				padding:24upx;
				color:#999999 ;
				font-size: 24upx;
				.value-name{
					color:#000000 ;
					font-size:32upx;
					margin-bottom:24upx ;
					font-weight: bold;
				}
			}
			.title-box{
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin-bottom: 32upx;
				.title-box-text{
					font-size:32upx ;
					font-weight: bold;
					color:#000000,
					
				}
				.close-img-box{
					width:34upx ;
					height:34upx;
					
					.close-img{
						width:32upx ;
						height:32upx;
					}
				}
				
			}
		}
		.info-value{
			display: flex;
			justify-content: center;
			
			font-size: 24upx;
			color:#000000;
			background: #ffffff;
			.info-value-text{
				width: 100%;
				padding:32upx;
				border-radius: 8upx;
				.tite-text{
					font-size:32upx ;
					color:#000000;
					margin-bottom: 14upx;
				}
				.value-text{
					font-size:24upx ;
					color:#999999 ;
				}
			}
			.click-text{
				border:1px solid #173B42;
				border-radius: 8upx;
			}
		}
</style>
